<script setup>
import { reactive, ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { removeToken } from "@/composables/cookie";
import { showMessage, showModel } from "@/composables/util.js";
import { updatePassword, updateUserInfo } from "@/api/common/user"
import { findArticleDetail } from "@/api/common/index"
import moment from 'moment'
import hljs from 'highlight.js'
// 代码高亮样式
import 'highlight.js/styles/tokyo-night-dark.css'
// 从浏览器本地存储中取出用户信息
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
const route = useRoute()
const router = useRouter()
// 控制个人信息弹出框
let info = ref(false)
let password = ref(false)
// 退出登录方法
const logout = () => {
    showModel('是否退出登录?').then(() => {
        // 删除cookie中的token
        removeToken()
        // 删除Local Storage中的userInfo
        localStorage.removeItem('userInfo')
        showMessage('退出登录成功!')
        // 跳转登录页
        router.push('/login')
    })
}
function goIndex() {
    router.push('/').then(() => {
        setTimeout(() => window.location.reload(), 50) // 延迟确保路由完成
    })
}
function goLogin() {
    router.push('/login').then(() => {
        setTimeout(() => window.location.reload(), 50) // 延迟确保路由完成
    })
}

// 文章数据
const article = ref({})

// 获取文章详情
function refreshArticleDetail(id) {
    findArticleDetail({ id: id }).then((res) => {
        if (res.data.success) {
            article.value = res.data.data
            console.log("文章详情数据" + JSON.stringify(article.value))
        }
    })
}
refreshArticleDetail(route.params.id)

// 正文 div 引用
const articleContentRef = ref(null)
onMounted(() => {
    // 使用 MutationObserver 监视 DOM 的变化
    const observer = new MutationObserver(mutationsList => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // 获取所有 pre code 节点
                let highlight = document.querySelectorAll('pre code')
                // 循环高亮
                highlight.forEach((block) => {
                    hljs.highlightBlock(block)
                })
            }
        }
    })

    // 配置监视子节点的变化
    const config = { childList: true, subtree: true }
    // 开始观察正文内容变化
    observer.observe(articleContentRef.value, config)
})

</script>

<template>
    <!-- 主容器使用Element布局 -->
    <el-container class="home-container">
        <!-- 导航栏 -->
        <el-header class="header">
            <div class="nav-container">
                <div class="logo">
                    <span class="blue">Edu</span>Platform
                </div>
                <el-menu mode="horizontal" :default-active="activeIndex">
                    <el-menu-item index="1" @click="goIndex">首页</el-menu-item>
                    <el-menu-item index="2">图文课程</el-menu-item>
                    <el-menu-item index="3">视频课程</el-menu-item>
                </el-menu>
                <div class="search-box">
                    <el-input placeholder="搜索课程..." suffix-icon="Search" class="search-input" />
                </div>
                <!-- 未登录状态 -->
                <div class="user-wrapper" v-if="!userInfo">
                    <el-button type="primary" class="login-btn" @click="goLogin" round>
                        <i class="el-icon-user"></i>
                        <span>登录 / 注册</span>
                    </el-button>
                </div>

                <!-- 已登录状态 -->
                <div class="user-panel" v-else>
                    <el-dropdown trigger="hover">
                        <div class="user-card">
                            <div class="profile">
                                <el-avatar :src="userInfo.avatar" :size="36" class="user-avatar"
                                    :style="{ backgroundColor: '#8ac8ff' }" />
                            </div>
                        </div>

                        <!-- 下拉菜单 -->
                        <template #dropdown>
                            <el-dropdown-menu class="user-menu">
                                <el-dropdown-item class="menu-item" @click="info = true">
                                    <i class="el-icon-user-solid"></i>个人信息
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="order = true">
                                    <i class="el-icon-time"></i>我的订单
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="router.push('/collect')">
                                    <i class="el-icon-star-off"></i>我的收藏
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="password = true">
                                    <i class="el-icon-lock"></i>修改密码
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item logout" @click="logout">
                                    <i class="el-icon-switch-button"></i>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        
    </el-container>

</template>


<style lang="scss" scoped>
$primary-blue: #409EFF;
$hover-blue: rgba(64, 158, 255, 0.1);

.home-container {
    background: #fff;
    min-height: 100vh;

    /* 容器布局 */
    .header {
        height: 70px !important;
        background: #ffffff;
        /* 纯白背景替代毛玻璃 */
        border-bottom: 1px solid #ebeef5;
    }

    .nav-container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 24px;
    }

    /* Logo样式 */
    .logo {
        font-size: 24px;
        font-weight: 600;
        margin-right: 48px;
        color: #303133;
    }

    .logo .blue {
        color: #409eff;
    }

    /* 导航菜单核心配置 */
    .el-menu--horizontal {
        background: transparent !important;
        border-bottom: none !important;
        flex: 1;
    }

    .el-menu-item {
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        padding: 0 28px;
        color: #606266;
        transition: color 0.3s;
    }

    .el-menu-item.is-active {
        color: #409eff !important;
        border-bottom: 2px solid #409eff;
    }

    /* 搜索框定制 */
    .search-box {
        margin-left: auto;
        margin-right: 24px;
    }

    .search-box .el-input {
        --el-input-border-radius: 20px;
        --el-input-bg-color: #f5f7fa;
    }

    .search-box .el-input__wrapper {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    /* 用户面板 */
    .user-panel .el-button {
        border-radius: 20px;
        padding: 10px 24px;
        background: #409eff;
        color: white;
    }

    .main-content {
        max-width: 1400px; // 扩大容器宽度
        width: 98%; // 增加自适应能力

        .course-section {
            .el-col {
                @media (min-width: 1200px) {
                    flex: 0 0 25%; // 大屏显示4列课程卡片
                    max-width: 25%;
                }
            }
        }

        margin: 0 auto;
        padding: 20px;



        .category-sidebar {
            .section-title {
                color: #303133;
                font-size: 20px;
                margin-bottom: 15px;
            }

            .category-item {
                display: flex;
                align-items: center;
                padding: 7px;
                transition: all 0.3s;

                &:hover {
                    background: #f8f9fa;
                    transform: translateX(5px);
                }

                .icon-box {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                    margin-right: 15px;
                }

                .cate-name {
                    font-size: 16px;
                    color: #606266;
                }
            }
        }

        // .main-section {
        //   margin-bottom: 40px;
        // }

        // .compact-carousel {

        //   border-radius: 8px;
        //   overflow: hidden;
        //   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        //   .carousel-slide {
        //     height: 100%;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     background: linear-gradient(135deg, #409EFF, #79bbff);

        //     h2 {
        //       color: white;
        //       font-size: 28px;
        //       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        //     }
        //   }
        // }

        /* 轮播容器优化 */
        .enhanced-carousel {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 轮播项容器 */
        .carousel-slide {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* 图片容器 */
        .image-wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 图片填充处理 */
        .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 保持比例填充容器 */
            object-position: center;
            /* 图片中心裁剪 */
            transition: transform 0.3s ease;
        }

        /* 悬浮标题样式 */
        .floating-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
        }

        .title-text {
            margin: 0;
            font-size: 1.5em;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        /* 指示器样式优化 */
        :deep(.el-carousel__indicators--outside) {
            bottom: 40px;
            /* 调整指示器位置 */
        }


        /* 悬停效果 */
        @media (hover: hover) {
            .carousel-image:hover {
                transform: scale(1.03);
            }
        }

        .course-section {
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 30px;
            }

            .course-card {
                transition: all 0.3s;
                margin: 0 10px 15px; // 增加左右间距
                width: calc(100% - 20px); // 防止溢出

                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                .course-cover {
                    height: 180px;
                    background: #909399;
                    border-radius: 4px;
                    margin-bottom: 15px;
                }

                .title {
                    color: #303133;
                    font-size: 16px;
                    margin-bottom: 12px;
                }

                .meta {
                    display: flex;
                    justify-content: space-between;
                    color: #909399;

                    .price {
                        color: #F56C6C;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

</style>
